<template>
      <el-menu
        mode="vertical"
        active-text-color="#ffd04b"
        background-color="#2a2a33"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item class="el1" index="1" @click="handleMenuItemClick('1')">
          <el-icon color="#ffffff"><House /></el-icon>
          <span>首页</span>
        </el-menu-item>
        <el-menu-item class="el1"  index="2" @click="handleMenuItemClick('2')">
          <el-icon><icon-menu /></el-icon>
          <span>前台</span>
        </el-menu-item>

        <el-sub-menu  class="el1"  index="3">
          <template #title>
            <el-icon><location /></el-icon>
            <span>系统管理</span>
          </template>
          
          <el-sub-menu class="el1"  index="3-4">
            <template #title>用户管理</template>
            <el-menu-item index="3-4-1" @click="handleMenuItemClick('3-4-1')">用户管理
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu class="el1"  index="3-6">
            <template #title>商品管理</template>
            <el-menu-item class="el1"  index="3-6-1" @click="handleMenuItemClick('3-6-1')">商品分类管理
            </el-menu-item>
            <el-menu-item class="el1"  index="3-6-2" @click="handleMenuItemClick('3-6-2')">轮播图管理
            </el-menu-item>
            <el-menu-item class="el1"  index="3-6-3" @click="handleMenuItemClick('3-6-3')">商品管理
            </el-menu-item>
            <el-menu-item class="el1"  index="3-6-4" @click="handleMenuItemClick('3-6-4')">订单管理
            </el-menu-item>
          </el-sub-menu>

        </el-sub-menu>


      </el-menu>
</template>

<script setup>
import router from "@/router";
import { House } from '@element-plus/icons-vue'
// 处理菜单项点击事件
const handleMenuItemClick = (index) => {
  // 这里可以根据不同的 index 进行不同的路由跳转
  // 以下是一个简单的示例，你需要根据实际的路由配置进行修改
  switch (index) {
    case '1':
      router.push('/admin/index');
      break;
    case '2':
      router.push('/');
      break;
    case '3-1':
      router.push('/some-route-for-3-1');
      break;
    case '3-2':
      router.push('/some-route-for-3-2');
      break;
    case '3-3':
      router.push('/some-route-for-3-3');
      break;
    case '3-4-1':
      router.push('/admin/index/user');
      break;
    case '3-6-1':
      router.push('/admin/index/goods');
      break;
    case '3-6-2':
      router.push('/admin/index/lunbo');
      break;
    case '3-6-3':
      router.push('/admin/index/good');
      break;
    case '3-6-4':
      router.push('/admin/index/dingdan');
      break;      
  }
};


</script>

<style scoped>

.el-menu {
  width: 15%; 
}
.el-menu li {
  width: 100%; 
}
.el-menu-vertical-demo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.el-menu-vertical-demo span{
  color: white;
  font-weight: bolder;
}
.el1:hover,
.el1:active,
.el-menu-vertical-demo span:hover,
.el-menu-vertical-demo span:active{
  color: yellow;
}
</style>